import React, { Component } from 'react'
import { withRouter } from "react-router-dom"
import { NavBar, Popover,Tabs,WhiteSpace } from 'antd-mobile';
import axios from "axios"
import "./video.scss"
const Item = Popover.Item;

class video extends Component {
  constructor(props){
    super(props)
    // console.log(props);
  }
  state = {
    visible: false,
    selected: '',
    tabs:[
    { id:1, title: '预告片' },
    { id:2, title: '新片看点' },
    { id:3, title: '每周必看' },
    { id:4, title: '说电影' },
    { id:5, title: '好片推荐' },
    { id:6, title: '犯罪' },
    { id:7, title: '奇幻' },
    { id:8, title: '科幻' },
    { id:9, title: '爱情' },
    { id:10, title: '追星' },
  ],
  videoContent:[],
  videoContent1:[], 
  videoContent2:[],
  videoContent3:[],
  };
  // 
  onSelect = (opt) => {
    // console.log(opt.props.value);
    this.setState({
      visible: false,
      selected: opt.props.value,
    });
  };
  //小视频菜单列表
  handleVisibleChange = (visible) => {
    this.setState({
      visible,
    });
  };
  componentDidMount(){
      axios.get("asgard/asgardapi/sns/common/feed/channel/list.json?uuid=CFF31EA0FA3C11EAB9E61545124E02245DFABA962FD64DC8ACBD65A990CDC59B&token=OwFr1YL2SqP7EtDEQNKMvExvjrcAAAAAkgsAALqKd35IdoyuDFI514M9CAMaAyJBgjnGlsqIInDS_o0Hg8U_mIOrD3ZN0b4cgnsdNA&channelId=4&feedChannelId=1067226&timestamp=1600738848485").then(res=>{
        // console.log(res)
        this.setState({
          videoContent:res.data.data.feeds
        })
      }).catch(err=>{
        console.log(err)
      })
      axios.get("asgard/asgardapi/sns/common/feed/channel/list.json?uuid=CFF31EA0FA3C11EAB9E61545124E02245DFABA962FD64DC8ACBD65A990CDC59B&token=OwFr1YL2SqP7EtDEQNKMvExvjrcAAAAAkgsAALqKd35IdoyuDFI514M9CAMaAyJBgjnGlsqIInDS_o0Hg8U_mIOrD3ZN0b4cgnsdNA&channelId=4&feedChannelId=1331498&timestamp=1600738848485").then(res=>{
        // console.log(res)
        this.setState({
          videoContent1:res.data.data.feeds
        })
      }).catch(err=>{
        console.log(err)
      })
      axios.get("asgard/asgardapi/sns/common/feed/channel/list.json?uuid=CFF31EA0FA3C11EAB9E61545124E02245DFABA962FD64DC8ACBD65A990CDC59B&token=OwFr1YL2SqP7EtDEQNKMvExvjrcAAAAAkgsAALqKd35IdoyuDFI514M9CAMaAyJBgjnGlsqIInDS_o0Hg8U_mIOrD3ZN0b4cgnsdNA&channelId=4&feedChannelId=1560874&timestamp=1600738848485").then(res=>{
        // console.log(res)
        this.setState({
          videoContent2:res.data.data.feeds
        })
      }).catch(err=>{
        console.log(err)
      })
      axios.get("asgard/asgardapi/sns/common/feed/channel/list.json?uuid=CFF31EA0FA3C11EAB9E61545124E02245DFABA962FD64DC8ACBD65A990CDC59B&token=OwFr1YL2SqP7EtDEQNKMvExvjrcAAAAAkgsAALqKd35IdoyuDFI514M9CAMaAyJBgjnGlsqIInDS_o0Hg8U_mIOrD3ZN0b4cgnsdNA&channelId=4&feedChannelId=1074953&timestamp=1600738848485").then(res=>{
        // console.log(res)
        this.setState({
          videoContent3:res.data.data.feeds
        })
      }).catch(err=>{
        console.log(err)
      })
  }
  render() {
    return (
      <div className="myVideo">
        {/* 小视频头部开始 */}
        <NavBar className="NavBar"
          rightContent={<Popover
            overlayClassName="fortest"
            overlayStyle={{ color: 'currentColor' }}
            visible={this.state.visible}
            overlay={[
              (<Item key="4" value="scan" data-seed="logId"><span onClick={this.goToHome}>首页</span></Item>),
              (<Item key="5" value="special" style={{ whiteSpace: 'nowrap' }}><span onClick={this.goToBangDan}>榜单</span></Item>),
              (<Item key="6" value="button ct" ><span  onClick={this.goToReDian} style={{ marginRight: 5 }}>热点</span></Item>),
            ]}
            align={{
              overflow: { adjustY: 0, adjustX: 0 },
              offset: [-10, 0],
            }}
            onVisibleChange={this.handleVisibleChange}
            onSelect={this.onSelect}
          >
            <div style={{
              height: '100%',
              padding: '0 15px',
              marginRight: '-15px',
              display: 'flex',
              alignItems: 'center',
            }}
            >
              <i className="iconfont icon-webicon03"></i>
            </div>
          </Popover>}
        >猫眼电影</NavBar>
        {/* 小视频头部结束 */}
        {/* 小视频tabs开始 */}
        <div className="myVideoTabs">
        <WhiteSpace />
        <Tabs tabs={this.state.tabs} initialPage={0} tabBarUnderlineStyle={{border:"1px solid red"}}>
          <div>
          {this.state.videoContent.map((v,index)=>{
            // console.log(v);
            // console.log(index);
            return (
              <section className="videos"  key={v.id} >
                <div className="video-item">
                  <a className="link" href={v.video.url}>
                  <div className="videoplayer" >
                    <video src={v.video.url} ></video>
                    <img className="img noneBg poster"  src={v.images[0].url} alt=""/>
                    <div className="video-title">{v.title}</div>
                    <div className="play-but"  data-index={v.id}></div>
                    <div className="info-bar">
                      <div className="count">{v.video.viewCount}</div>
                      <div className="time" >{parseInt((v.video.dur)/60)}:{parseFloat(v.video.dur%60)}</div>
                    </div>
                  </div>
                  <div className="video-info">
                  <div>
                  <img className="img noneBg user-avatar" src={v.user.avatarurl} alt={v.title}/>
                  <div className="user-nickname">{v.user.nickName}</div>
                  </div>
                  <div>
                  <div className="video-praise">{v.upCount} </div>  
                  <div className="video-comment">{v.commentCount} </div> 
                  <div className="video-share"></div>
                  </div>
                  </div>
                  </a>
                </div>
              </section>
            )
          })}
          </div>
          <div>
          {this.state.videoContent1.map((v,index)=>{
            // console.log(v);
            // console.log(index);
            return (
 <section className="videos"  key={v.id} >
                <div className="video-item">
                  <a className="link" href={v.video.url}>
                  <div className="videoplayer" >
                    <video src={v.video.url} ></video>
                    <img className="img noneBg poster"  src={v.images[0].url} alt=""/>
                    <div className="video-title">{v.title}</div>
                    <div className="play-but"  data-index={v.id}></div>
                    <div className="info-bar">
                      <div className="count">{v.video.viewCount}</div>
                      <div className="time" >{parseInt((v.video.dur)/60)}:{parseFloat(v.video.dur%60)}</div>
                    </div>
                  </div>
                  <div className="video-info">
                  <div>
                  <img className="img noneBg user-avatar" src={v.user.avatarurl} alt={v.title}/>
                  <div className="user-nickname">{v.user.nickName}</div>
                  </div>
                  <div>
                  <div className="video-praise">{v.upCount} </div>  
                  <div className="video-comment">{v.commentCount} </div> 
                  <div className="video-share"></div>
                  </div>
                  </div>
                  </a>
                </div>
              </section>
            )
          })}
          </div>
          <div>
          {this.state.videoContent2.map((v,index)=>{
            // console.log(v);
            // console.log(index);
            return (
              <section className="videos"  key={v.id} >
                <div className="video-item">
                  <a className="link" href={v.video.url}>
                  <div className="videoplayer" >
                    <video src={v.video.url} ></video>
                    <img className="img noneBg poster"  src={v.images[0].url} alt=""/>
                    <div className="video-title">{v.title}</div>
                    <div className="play-but"  data-index={v.id}></div>
                    <div className="info-bar">
                      <div className="count">{v.video.viewCount}</div>
                      <div className="time" >{parseInt((v.video.dur)/60)}:{parseFloat(v.video.dur%60)}</div>
                    </div>
                  </div>
                  <div className="video-info">
                  <div>
                  <img className="img noneBg user-avatar" src={v.user.avatarurl} alt={v.title}/>
                  <div className="user-nickname">{v.user.nickName}</div>
                  </div>
                  <div>
                  <div className="video-praise">{v.upCount} </div>  
                  <div className="video-comment">{v.commentCount} </div> 
                  <div className="video-share"></div>
                  </div>
                  </div>
                  </a>
                </div>
              </section>
            )
          })}
          </div>
          <div>
          {this.state.videoContent3.map((v,index)=>{
            // console.log(v);
            // console.log(index);
            return (
              <section className="videos"  key={v.id} >
              <div className="video-item">
                <a className="link" href={v.video.url}>
                <div className="videoplayer" >
                  <video src={v.video.url} ></video>
                  <img className="img noneBg poster"  src={v.images[0].url} alt=""/>
                  <div className="video-title">{v.title}</div>
                  <div className="play-but" onClick={this.videoPlayerHandleClick} data-index={v.id}></div>
                  <div className="info-bar">
                    <div className="count">{v.video.viewCount}</div>
                    <div className="time" >{parseInt((v.video.dur)/60)}:{parseFloat(v.video.dur%60)}</div>
                  </div>
                </div>
                <div className="video-info">
                <div>
                <img className="img noneBg user-avatar" src={v.user.avatarurl} alt={v.title}/>
                <div className="user-nickname">{v.user.nickName}</div>
                </div>
                <div>
                <div className="video-praise">{v.upCount} </div>  
                <div className="video-comment">{v.commentCount} </div> 
                <div className="video-share"></div>
                </div>
                </div>
                </a>
              </div>
            </section>
            )
          })}
          </div>
        </Tabs>
        <WhiteSpace />
        </div>
        {/* 小视频tabs结束 */}
      </div>
    )
  }
}

export default withRouter(video)
